import React, { Fragment , useEffect } from 'react';
import { connect } from 'react-redux';

import { useNavigate } from 'react-router-dom';

import * as actionCreators from './store/actionCreators';

const Home = props => {
    
    const { homeData, setData } = props;

    let navigate = useNavigate();

    useEffect(() => {
        
    }, [ ]);

    const toGo = (link) => navigate(link);

    /** --------------------------- 数据操作 ------------------------------ */
   
    /** --------------------------- 数据操作 ------------------------------ */

    return (
        <div className='w-lay'>
            <Fragment>
                <div onClick={()=> toGo('/login')}>
                    登录
                </div>
                <div>
                    Home-data store: { homeData }
                </div>
                <div onClick={()=> setData('welcome to 眯客网') }>
                    更新home store ,homeData 
                </div>
            </Fragment>
        </div>
    )
}

/**
 * 将 store 中数据映射到 props  
 */
const mapStateToProps = (state) => {
    return {
        // 数组的第一个元素对应的是：总store即 src/store/reducer.js 中的 home
        homeData: state.getIn(['home', 'homeData'])
    }
}

const mapDispatchToProps = (dispatch) => ({
    setData(data) {
        const action = actionCreators.setData(data);
        dispatch(action);
    }
})

/**
 * 注意：
 * 1. export 的数据被 connect 包装
 * 2. 通过 mapStateToProps、mapDispatchToProps 方法，把 store 中的 state 和 dispatch 均映射到props.
 *    然后就可以 props 来访问，store 中数据变化会直接改变 props , 从而触发 视图更新。
 * 3. state.getIn() 来自于 redux-immutable
 * 
 */
export default connect(mapStateToProps, mapDispatchToProps)(Home);